<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>测试页面</title>
    <link th:href="@{../css/bootstrap.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{../plugins/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{../plugins/video6.6.2.js/css/video-js.min.css}">
    <script th:src="@{../js/jquery.min.js}"></script>
    <script th:src="@{../js/bootstrap.min.js}"></script>
    <script th:src="@{http://ditu.google.cn/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc}"></script>
    <script th:src="@{https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js}"></script>
    <script th:src="@{../plugins/layui/layui.js}"></script>
    <script th:src="@{../plugins/video6.6.2.js/js/video.min.js}"></script>
</head>
<body>
 <div class="container">
     <div id="map" class="row"  style="width: 800px;height: 600px"></div>
 </div>
</body>
</html>
<script>
    function initialize()
    {
        //var location={lat:23.16,lng:113.23};
        var mapProp = {
            center:new google.maps.LatLng( -28.024, 140.887),
            zoom:15,
            mapTypeId:google.maps.MapTypeId.HYBRID
        };
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        var map=new google.maps.Map(document.getElementById("map"),mapProp);
        //var marker = new google.maps.Marker({position: location, map: map});  //添加一个标记
        var markers = locations.map(function(location, i) {
            return new google.maps.Marker({
                position: location,
                label: labels[i % labels.length]
            });
        });
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
        var locations = [
            {lat: -31.563910, lng: 147.154312},
            {lat: -33.718234, lng: 150.363181},
            {lat: -33.727111, lng: 150.371124},
            {lat: -33.848588, lng: 151.209834},
            {lat: -33.851702, lng: 151.216968},
            {lat: -34.671264, lng: 150.863657},
            {lat: -35.304724, lng: 148.662905},
            {lat: -36.817685, lng: 175.699196},
            {lat: -36.828611, lng: 175.790222},
            {lat: -37.750000, lng: 145.116667},
            {lat: -37.759859, lng: 145.128708},
            {lat: -37.765015, lng: 145.133858},
            {lat: -37.770104, lng: 145.143299},
            {lat: -37.773700, lng: 145.145187},
            {lat: -37.774785, lng: 145.137978},
            {lat: -37.819616, lng: 144.968119},
            {lat: -38.330766, lng: 144.695692},
            {lat: -39.927193, lng: 175.053218},
            {lat: -41.330162, lng: 174.865694},
            {lat: -42.734358, lng: 147.439506},
            {lat: -42.734358, lng: 147.501315},
            {lat: -42.735258, lng: 147.438000},
            {lat: -43.999792, lng: 170.463352}
        ]
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>